<template>
  <Page name="确认支付">
  <div class="info">
    <div class="amount"><span class="price">{{form.amount}}</span> {{form.currency_code}}</div>
    <div class="tip-box">
      <div class="tip-alert">
        <i class="ic ic-tip-yellow tip-icon"></i>
        <p><span v-if="form.currency_code != form.amount && countRate">考虑市场汇率变动，此次充值预估到帐金额为{{rate_amount}}{{form.account}}左右；</span>提交申请后，客服将在2个工作日内联系你。</p>
      </div>
    </div>
  </div>
  <div class="list-item">
    <div class="item">
      <div class="left">订单信息</div>
      <div class="right">充值</div>
    </div>
    <div class="item">
      <div class="left">付款方式</div>
      <div class="right">
        <div class="fx fx-vc fx-end" _click="showActionSheet=true">
          <span class="currency">现金</span>
          <!-- <i class="css-arrow-right ml12"></i> -->
        </div>
      </div>
    </div>
  </div>
  <div class="form-btn">
    <button class="btn btn-primary btn-block" :disabled="posting" @click="submit">立即支付</button>
  </div>

  <!-- 充值方式 -->
  <ActionSheet
  v-if="showActionSheet"
  title="选择充值方式"
  :list="payTypeList"
  :value="form.pay_type"
  @close="showActionSheet = false"
  @select="selectPayType">
    <template slot-scope="{ item }" class="out-account-item">
      <div class="out-account-item">
        <div class="tit">{{item.name}}</div>
        <i class="ic" :class="{'on':item.id === form.pay_type}"></i>
      </div>
    </template>
  </ActionSheet>
</Page>
</template>

<script>
import Page from "~/components/page"
import ActionSheet from "~/components/ActionSheet.vue";

export default {
  validate({store,redirect}){
    // 如果form为空，表示没有经过上一步操作非法进入页面
    if(!store.state.recharge.form || !store.state.recharge.form.amount){
      redirect('/wealth/recharge');
    }
    return true;
  },
  components: {
    ActionSheet,
    Page
  },
  asyncData({store,app}){
    let form = JSON.parse(JSON.stringify(store.state.recharge.form));

    return {
      // 目前固定是现金充值，不可修改
      payTypeList:[{
        id:1,
        name:'现金'
      }],
      form,
    }
  },
  data: function() {
    return {
      posting:false,
      showActionSheet:false,
      rate_amount:'',
      countRate:false,
    };
  },
  computed: {
  },
  async mounted(){
    if(this.form.account != this.form.currency_code){
      await this.getRate();
    }
  },
  methods: {
    selectPayType(){ //提现方式 未找到哪里返回充值类型的接口
    },
    async submit() {
      /**
       * 1现金 2银行卡转账 3支付宝 4微信
       * 未找到哪里返回充值类型的接口
       */
      if(this.posting) return false;
      this.posting = true;
      let {data:rs} = await this.$axios.post('?ct=api&ac=recharge',{
        pay_type:this.form.pay_type,
        apply_currency_code:this.form.currency_code,
        apply_amount:this.form.amount,
        income_currency_code:this.form.account
      })
      if(rs.code == 0){
        this.$store.commit('recharge/setForm',this.form);
        this.$router.push({name:"wealth-recharge-status"});
      }else{
        this.$toast(rs.msg);
      }
      this.posting = false;
    },
    async getRate(){// 获取汇率，并计算
      let {data:rs} = await this.$axios.post('?ct=api&ac=get_rate',{
        from_currency:this.form.currency_code,
        to_currency:this.form.account,
      })
      if(rs.code == 0){
        this.rate_amount = (this.form.amount * rs.data.c_rate).toFixed(2);
        this.countRate = true;
      }else{
        this.$toast(rs.msg);
      }
    }

  }
};
</script>

<style lang="less" scoped>
.info {
  display: flex;
  flex-direction: column;
  justify-content: center;;
  align-items: center;
  width:100%;
  min-height:240px;
  overflow: hidden;
  padding:0 28px;
  background-color:#fff;
  .amount,.remark {
    max-width: 100%;
    .text-ellipsis();

  }
  .amount {
    font-size:30px;
    color:#292929;
    .price {
      font-size:60px;
    }
  }
  .remark {
    font-size:30px;
    margin-top:30px;
    color:#999;
  }

}

.form-btn {
  margin:60px 30px;
}

.out-account-item {
  width: 100%;
  display: flex;
  align-items: center;
    .tit {
      flex:1;
      font-size:32px;
      color:#292929;
      .text-ellipsis();
    }
    .ic {
      margin-left:10px;
      display: flex;
      align-items: center;
      justify-content: center;
      width:36px;
      height:36px;
      border-radius: 50%;
      border:1px solid #c1c5cf;
      &::after {
        content:'';
        width:16px;
        height:16px;
        border-radius: 50%;
      }

      &.on {
        border-color:#2086f9;
        &::after {
          background-color:#2086f9;
        }
      }
    }
    span {
      font-size:24px;
      color:#999;
    }
}
.tip-box {
  margin-top:25px;
  margin-bottom:30px;
  width:100%;
  background-color:rgb(252,248,235);
  font-size:24px;
  color:rgb(211,155,0);
}
</style>
